import { observable, action, computed } from 'mobx';
import { Container } from 'stores/models/core/nodeWithList';
import * as CONST from 'common/const';
import { backgroundImageExtendStyle, stringExtendStyle } from 'common/utils/style';
import Motions from 'components/motionsRender/model/motions';
import CONFIG from 'common/const/observer/page';

/**
 * Page
 */
export default class Page extends Container {

  @observable width = CONST.PAGE_WIDTH;
  @observable height = CONST.PAGE_HEIGHT;
  @observable backgroundColor = '#FFF';
  @observable backgroundImage = '';
  @observable backgroundImageFillMode = 'cover'; // repeat 平铺, cover 覆盖, full 拉伸
  @observable motions = [];       // 保存后的动效树
  @observable motionToPlay = null;       // 播放的动效
  @observable temporaryMotions = null;   // 临时的动效树，用于在动效编辑器里进行编辑

  constructor(props) {
    super({
      ...props,
      icon: 'icon-page-list',
      type: 'page',
      label: '页面',
    });

    // this.init({
    //   props: {
    //     icon: 'icon-page-list',
    //     type: 'page',
    //     label: '页面',
    //   }
    // });
    let observableProps = {};
    CONFIG.forEach(item => {
      observableProps[item.key] = item.val;
    });
    this.init({
      observableProps
    });
  }

  @computed get style() {
    return {
      width: this.width,
      height: this.height,
      opacity: this.opacity / 100,
      filter: stringExtendStyle([
        {
          key: 'brightness',
          val: this.brightness,
        },
        {
          key: 'blur',
          val: this.blur,
        },
        {
          key: 'contrast',
          val: this.contrast,
        },
        {
          key: 'saturate',
          val: this.saturate,
        },
        {
          key: 'grayscale',
          val: this.grayscale,
        },
        {
          key: 'sepia',
          val: this.sepia,
        },
        {
          key: 'hueRotate',
          val: this.hueRotate,
        },
        {
          key: 'invert',
          val: this.invert,
        }

      ]),
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: this.rotate
        },
        {
          key: 'rotateX',
          val: this.rotateX
        },
        {
          key: 'rotateY',
          val: this.rotateY
        }
      ]),
      ...backgroundImageExtendStyle(this.backgroundImage, this.backgroundImageFillMode),
    };
  }

  // 打开动效编辑器
  @action openMotionEditor(motion) { // motion is undefined at start
    let frames = null;
    if ( motion ) {
      // 编辑
      this.temporaryMotions = new Motions({parent: this, motion});
    } else {
      // 新建
      frames = [];
      // console.log(this);
      this.list.forEach(ele => {
        if (ele.selected) {
          // realId 为选中元素的id
          ele.realId = ele.id;
          frames.push(ele);
        }
      });
      const data = {
        height: this.height,
        list: frames
      };
      this.temporaryMotions = new Motions({parent: this}, data);
    }
    this.parent.parent.update('motionVisible', true);
  }

  // 更改页面高度
  @action setHeight(val) {
    val = val < CONST.PAGE_HEIGHT ? CONST.PAGE_HEIGHT : val;
    this.update('height', val);
  }

  @action changeRotateX() {
    this.rotateX = this.rotateX + 180;
    if (this.rotateX === 360) {
      this.rotateX = 0;
    }
  }
  @action changeRotateY() {
    this.rotateY = this.rotateY + 180;
    if (this.rotateY === 360) {
      this.rotateY = 0;
    }
  }

  @action isFillAll() {
    this.fillAll = !this.fillAll;
  }
  @action isRowAll() {
    this.rowAll = !this.rowAll;
  }









}
